<template>
	<view class="">
		<view class="iutns">
			<image src="https://m.aqbwg.cn/sourse/xiaowan/buyka.png" mode="scaleToFill" class="imgt"></image>
		</view>
		<view class="kt">
			
			<view class="mces">
				<uni-section title="购买万事通卡" type="line" title-color="#956a28" icon-color="#956a28"></uni-section>
			</view>
			<view class="cuisc">
				<view class="yuxis" v-for="(item,index) in paymentIcons" :key="index" @click="onPayment(index,item)" :class="index == selectedIndex?'t1':''">
					<view class="tusc">
						<image src="/static/sjimg/jinbi.png" mode="widthFix" class="imgss"></image>
						<text class="txtds">{{item.busi_name}}</text>
					</view>
				</view>
			</view>
			<view class="btncss"> 
				<view class="wxcass" @click="wxpay">购买</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" background-color="#fff" border-radius="20px 20px 0 0" :is-mask-click="false">
			<view class="pobox">
				<view class="cu-bar">
					<uni-icons type="wallet-filled" size="18" color="#43240b"></uni-icons>
					<view class="content">支付</view>
					<uni-icons type="closeempty" size="18" color="#43240b" @click="hideModal"></uni-icons>
				</view>
				<view class="padding-xll">
					<view class="order-price">￥<text>{{ payinfo.busi_name }}</text></view>
					<view class="order-no">订单编号：{{ bids }}</view>
				</view>
				<view class="btndcss">
					<view class="wxcass" @click="wxspay">微信支付</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import { ref , onMounted } from 'vue';
	import { onShow , onLoad } from '@dcloudio/uni-app';
	// import { getMember , apiChongzhi , apiPayrech , apiPaywx } from '@/api/apis.js';
	
	const memberId= ref('');
	const bids= ref('');
	const popup= ref(null);
	const memberinfo = ref({});
	const payinfo = ref({});
	const selectedIndex = ref(-1);
	const paymentIcons = ref([
		{id:1,busi_name:10},
		{id:2,busi_name:50},
		{id:3,busi_name:100},
		{id:4,busi_name:200}
	]);
	
	const onPayment = (e,i) => { 
		selectedIndex.value=e;
		payinfo.value=i;
	};
	const hideModal = ()=> { popup.value.close(); };
	const cpays = ()=> { uni.navigateTo({ url:'/pagesA/chongzhi/cjilu' }) };
	const wxpay = async()=>{
		// popup.value.open();
		uni.showToast({ title: '暂未开放',icon:'none' });
		// try {
		// 	let res = await apiPayrech({
		// 		memberid: memberId.value,
		// 		mid:uni.getStorageSync('merchantId'),
		// 		money_pay:payinfo.value.busi_name,
		// 		money:payinfo.value.busi_value
		// 	});
		// 	if(res.data.result==0){
		// 		bids.value=res.data.msg;
		// 		popup.value.open();
		// 	}else{
		// 		uni.showToast({ title: res.data.msg,icon:'none' });
		// 	}
		// } catch (error) {
		// 	console.error('获取数据失败', error);
		// }
	};
	const wxspay = async()=>{
		uni.showToast({ title: '暂未开放',icon:'none' });
		// try {
		// 	let res = await apiPaywx({
		// 		bid: bids.value,
		// 		openid:memberinfo.value.openid
		// 	});
		// 	if(res.data.result==0){
		// 		var data = JSON.parse(res.data.data);
		// 		uni.requestPayment({
		// 			appId: data.appId,
		// 			provider: 'wxpay',
		// 			timeStamp: data.timeStamp,
		// 			nonceStr: data.nonceStr,
		// 			package: data.package,
		// 			signType: data.signType,
		// 			paySign: data.paySign,
		// 			success: function(res) {
		// 				uni.showToast({ title: '支付成功', icon: 'none' });
		// 				popup.value.close();
		// 				infoData();
		// 			},
		// 			fail: function(err) {}
		// 		});
		// 	}else{
		// 		uni.showToast({ title: res.data.msg,icon:'none' });
		// 	}
		// } catch (error) {
		// 	console.error('获取数据失败', error);
		// }
	};
	// const infoData = async()=>{
	// 	try {
	// 		let res = await getMember({
	// 			memberId: memberId.value
	// 		});
	// 		if(res.data.result==0){
	// 			const data= res.data.data;
	// 			memberinfo.value=data;
	// 		}
	// 	} catch (error) {
	// 		console.error('获取数据失败', error);
	// 	}
	// };
	
	onShow(() => {
		memberId.value = uni.getStorageSync('xwmemberId ');
		// infoData();
	});
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.iutns{
		display: flex;justify-content: center;
		background-color: #2b2d45;
		padding: 40rpx 0 0;
	}
	.imgt{
		width: 700rpx;
		height: 331rpx;
	}
	.kt{
		padding: 30rpx;
		position: relative;
		margin-top: -70rpx;
		background-color: #fff;
		border-radius: 30rpx;
		.licss{
			padding: 30rpx;
			background-image: linear-gradient(to right, #ffa901, #f26640);
			border-radius: 20rpx;
			.yucss1{
				font-size: 24rpx;
				margin-bottom: 20rpx;
				color: #fff;
			}
			.yucss2{
				display: flex;
				align-items: flex-end;
				justify-content: space-between;
				.ingcss{
					display: flex;
					align-items: center;
					.imgs{
						width: 70rpx;
					}
					.txts{
						font-size:70rpx;
						font-weight: bolder;
						color: #fff;
					}
				}
				.txtk{
					font-size: 28rpx;
					color: #fff;
					display: flex;
					align-items: center;
					.chcss{
						margin-left: 10rpx;
					}
				}
			}
		}
		.cuisc{
			display: flex;
			flex-flow: wrap;
			align-items: center;
			justify-content: space-between;
			.yuxis{
				margin: 10rpx 0;
				padding: 25rpx 0;
				border-radius: 12rpx;
				width: 30%;
				border: 6rpx solid #f6f6f6;
				background-color: #f6f6f6;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				.imgss{
					width: 44rpx;
				}
			}
			.tusc{
				display: flex;
				align-items: center;
				.txtds{
					font-size: 35rpx;
					margin-left: 10rpx;
					font-weight: bolder;
				}
			}
			.zicss{
				font-size: 24rpx;
				color: #7a7a7a;
			}
			.t1{
				background-color: #fbf4e8;
				border: 6rpx solid #f1dbac !important;
				color: #956a28 !important;
			}
		}
	}
	.btncss{
		width: 100%;
		position: fixed;
		display: flex;
		justify-content: center;
		left: 0;
		bottom: 60rpx;
		.wxcass{
			padding: 30rpx;
			width: 80%;
			border-radius: 80rpx;
			background: linear-gradient(to left,#eabb6d,#f2dcaf);
			color: #43240b;
			font-size: 28rpx;
			font-weight: bold;
			text-align: center;
		}
	}
	.mces{
		padding: 10rpx 0 30rpx;
	}
	.pobox{
		background-color: #fff;
		border-radius:50rpx 50rpx 0 0;
		overflow: hidden;
		height: 70vh;
		.cu-bar{
			display: flex;
			justify-content: space-between;
			height: 100rpx;
			padding: 0 30rpx;
			line-height: 100rpx;
		}
		.padding-xll {
			padding: 15rpx 50rpx 50rpx !important;
			display: flex;
			flex-direction: column;
			align-items: center;
			.order-price {
				text-align: center;
				color: #ff0000;
				font-size: 40rpx;
			
				text {
					font-size: 80rpx;
					font-weight: bold;
				}
			}
			.order-no {
				text-align: center;
				color: #959CA6;
				font-size: 24rpx;
			}
			.order-no1 {
				text-align: center;
				color: #ff0000;
				font-size: 28rpx;
				margin-top: 12rpx;
				padding-bottom: 20rpx;
			}
		}
		.btndcss{
			position: absolute;
			left: 0;
			bottom: 60rpx;
			width: 100%;
		}
		.wxcass{
			padding: 30rpx;
			margin: 0 30rpx;
			border-radius: 80rpx;
			background: linear-gradient(to left,#eabb6d,#f2dcaf);
			color: #43240b;
			font-size: 28rpx;
			font-weight: bold;
			text-align: center;
		}
	}
</style>